<!--
 *                                                     __----~~~~~~~~~~~------___
 *                                    .  .   ~~//====......          __--~ ~~
 *                    -.            \_|//     |||\\  ~~~~~~::::... /~
 *                 ___-==_       _-~o~  \/    |||  \\            _/~~-
 *         __---~~~.==~||\=_    -_--~/_-~|-   |\\   \\        _/~
 *     _-~~     .=~    |  \\-_    '-~7  /-   /  ||    \      /
 *   .~       .~       |   \\ -_    /  /-   /   ||      \   /
 *  /  ____  /         |     \\ ~-_/  /|- _/   .||       \ /
 *  |~~    ~~|--~~~~--_ \     ~==-/   | \~--===~~        .\
 *           '         ~-|      /|    |-~\~~       __--~~
 *                       |-~~-_/ |    |   ~\_   _-~            /\
 *                            /  \     \__   \/~                \__
 *                        _--~ _/ | .-~~____--~-/                  ~~==.
 *                       ((->/~   '.|||' -_|    ~~-/ ,              . _||
 *                                  -_     ~\      ~~---l__i__i__i--~~_/
 *                                  _-~-__   ~)  \--______________--~~
 *                                //.-~~~-~_--~- |-------~~~~~~~~
 *                                       //.-~~~--\
 *                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                               神兽保佑            永无BUG
 *                                           紧凑树
 -->
<template>
  <el-container id="container">
    <div id="tree"></div>
  </el-container>
</template>

<script>
import G6 from '@antv/g6'
import {
  tree
} from '@/assets/js/algorithm-category.js'
export default {
  name: 'AlgorithmCategory',
  data () {
    return {
      // 实例
      treeGraph: null
    }
  },
  mounted () {
    this.initGraph(tree)
    // 点击节点
    this.treeGraph.on('node:click', (ev) => {
      const id = ev.item.get('id')
      console.log(id)
      this.addTreeChild(ev)
    })
  },
  methods: {
    /**
     * 加载树图实例
     * @date 2021-07-21
     * @param {Object} data
     */
    initGraph (data) {
      // 提示框
      const tooltip = new G6.Tooltip({
        offsetX: 10,
        offsetY: 10,
        // 允许出现 tooltip 的 item 类型
        itemTypes: ['node'],
        // 自定义 tooltip 内容
        getContent: (e) => {
          const label = e.item.getModel().id
          const outDiv = document.createElement('div')
          outDiv.style.width = 'fit-content'
          outDiv.innerHTML = `<span>${label}</span>`
          return outDiv
        }
      })
      this.treeGraph = new G6.TreeGraph({
        container: 'tree',
        plugins: [tooltip],
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange (item, collapsed) {
                const data = item.getModel()
                data.collapsed = collapsed
                return true
              }
            },
            'drag-canvas',
            'zoom-canvas'
          ]
        },
        defaultNode: {
          size: [100, 26],
          type: 'rect'
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            endArrow: true
          }
        },
        layout: {
          type: 'compactBox',
          direction: 'LR',
          getId: function getId (d) {
            return d.id
          },
          getHeight: function getHeight () {
            return 16
          },
          getWidth: function getWidth () {
            return 16
          },
          getVGap: function getVGap () {
            return 10
          },
          getHGap: function getHGap () {
            return 100
          }
        }
      })
      this.treeGraph.node(function (node) {
        return {
          label: node.id.length > 10 ? node.id.substring(0, 10) + '...' : node.id
        }
      })
      this.treeGraph.data(data)
      this.treeGraph.render()
      this.treeGraph.fitCenter()
    },
    addTreeChild (ev) {
      // const nodeLen = Math.round(Math.random() * 10)
      // for (let i = 0; i < nodeLen; i++) {
      //   const newId = Math.round(Math.random() * 10000 + 10000)
      //   let label = `子代${newId}`
      //   if (label.length > 10) {
      //     label = label.substring(0, 5) + '...'
      //   }
      //   this.treeGraph.addChild({
      //     id: String(newId),
      //     label: label,
      //     data: {
      //       id: String(newId),
      //       label: `子代${newId}`
      //     }
      //   }, id)
      // }
      const item = ev.item
      const nodeId = item.get('id')
      const model = item.getModel()
      const children = model.children
      if (!children || children.length === 0) {
        const childData = {
          id: `${nodeId}子代`,
          type: 'rect',
          children: []
        }
        const nodeLen = Math.round(Math.random() * 10)
        for (let i = 0; i < nodeLen; i++) {
          const newId = Math.round(Math.random() * 10000 + 10000)
          let label = `子代${newId}`
          if (label.length > 10) {
            label = label.substring(0, 5) + '...'
          }
          const obj = {
            id: String(newId),
            label: label,
            data: {
              id: String(newId),
              label: `子代${newId}`
            }
          }
          childData.children.push(obj)
        }
        this.treeGraph.addChild(childData, nodeId)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#tree {
  width: 100%;
  height: 100%;
}
</style>
